<template>
	<view class="page-cart">
		<mx-navbar title="购物车"></mx-navbar>

		<!--购物车内容-->
		<view class="cbody">
			<view class="wrap-main" v-if="$store.token">
				<view class="btns-top" v-if="cart.list && cart.list.length > 0">
					<view>共{{ cart.count || 0 }}个</view>
					<view class="btn-del" v-if="!is_del" @click="is_del = !is_del">
						<text class="cuIcon cuIcon-edit"></text>
						<text>编辑</text>
					</view>
					<view v-else @click="is_del = !is_del">完成</view>
				</view>
				<view v-for="(group, g) in cart.list" class="wrap-cart" :key="g">
					<view class="wrap-actype">
						<view class="wrap-name">
							<text class="name">{{ group.tag || '正价商品' }}</text>
							<text>{{ group.name }}</text>
						</view>
					</view>
					<view class="wrap-goods">
						<view v-for="(item, index) in group.goods" class="goods-item-box" :key="index">
							<goods :goods="item" @fresh="fresh" />
						</view>
					</view>
				</view>


				<!--空购物车-->
				<view class="wrap-empty" v-if="!cart.list || cart.list.length == 0">
					<mx-empty txt="购物车空空如也，快去首页逛逛吧！"></mx-empty>
				</view>
			</view>

			<!-- 未登录 -->
			<view class="wrap-main nologin-main" v-else>
				<view class="nologin">
					<view class="cu-btn shadow-blur main-btn" @click="$go('/pages/login/login')">去登录</view>
					您尚未登录，请前往登录!
				</view>
			</view>

		</view>
		<mx-special v-model="pn" :scroll_top="sh"></mx-special>


		<!--底部操作栏 -->
		<view class="cart-footer" v-if="$store.token && cart.list && cart.list.length > 0">
			<view class="ctl">
				<gcheck v-model="cart.select" @change="fresh" />
				<view class="cinfo flex align-center">
					<text class="text">合计:</text>
					<text class="pi mprice">¥</text>
					<text class="num mprice">{{ cart.payment_amount || 0 }}</text>
					<text class="text">已优惠:</text>
					<text class="yhpi mprice">¥</text>
					<text class="yhnum mprice">{{ cart.total_discount_amount || 0 }}</text>
				</view>
			</view>
			<view class="cu-btn shadow-blur btn-pay" v-if="!is_del" @click="pay">去结算</view>
			<view class="cu-btn shadow-blur btn-pay" v-else @click="del">删除商品</view>
		</view>

	</view>
</template>

<script setup>
import goods from './com/goods.vue'
import gcheck from './com/gcheck.vue'
const { proxy } = getCurrentInstance()

onShow(() => {
	proxy.$nextTick(() => {
		getContentHeight()
	})
	getData(true)
})

const cart = ref({})
async function getData(loading) {
	if (!proxy.$store.token) return
	let res = await proxy.$api('CartList', {}, loading)
	if (res.code === 0) {
		cart.value = res.data
		proxy.$nextTick(() => {
			getContentHeight()
		})
	}
}

async function fresh() {
	getData(false)
}

// 删除
const is_del = ref(false)
async function del() {

	let gids = isEmptyBarcode()
	if (gids.length == 0) {
		return proxy.$toast('请选中删除的商品')
	}
	let res = await proxy.$api('CartDel', {
		type: 2,
		gids: gids
	})
	if (res.code === 0) {
		is_del.value = false
		proxy.$toast('删除成功').then(_ => {
			fresh()
		})
	}
}

function isEmptyBarcode() {
	let gids = []
	cart.value.list.forEach((item, index) => {
		item.goods.forEach((sub_item, sindex) => {
			if (sub_item.select == 1) {
				gids.push(sub_item.id)
			}
		})
	})
	return gids
}

function pay() {
	let gids = isEmptyBarcode()
	if (gids.length == 0) {
		return proxy.$toast('请选中结算的商品')
	}
	proxy.$go(`/pages/pay/pay`)
}

const pn = ref(1)
onReachBottom(() => {
	pn.value += 1
})

const sh = ref(0)
function getContentHeight() {
	const query = uni.createSelectorQuery().in(proxy)
	query
		.select(`.cbody`)
		.boundingClientRect((res) => {
			sh.value = (res && res.height)
		})
		.exec()
}

</script>

<style lang="scss" scoped>
.page-cart {
	width: 100%;
	min-height: 100vh;
}

/*购物车内容*/
.wrap-main {
	flex: 1;
	padding-bottom: 30rpx;

	.btns-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background-color: #ffffff;
		font-size: 24rpx;
		color: #000;

		.btn-del {
			display: flex;
			align-items: center;
		}
	}

	.wrap-cart {
		background-color: #ffffff;
		margin: 24rpx 0rpx 0rpx;

		.wrap-actype {
			width: 100%;
			height: 90rpx;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
			flex-wrap: nowrap;
			text-overflow: ellipsis;
			font-size: 24rpx;
			color: #000;

			.wrap-name {
				flex-grow: 1;
				font-size: 24rpx;

				.name {
					background: $main_color;
					margin-right: 12rpx;
					padding: 10rpx 10rpx;
					font-size: 20rpx;
					color: white;
					border-radius: 4rpx;
				}
			}
		}

		// 购物车商品
		.goods-item-box {
			width: 100%;
		}
	}
}

.nologin-main {
	height: 700rpx;
	position: relative;
}

//空购物车
.wrap-empty {
	height: 700rpx;
	position: relative;
}

//底部导航栏
.cart-footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	height: 112rpx;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1rpx solid #f6f6f6;
	border-top: 1rpx solid #f0f1f3;
	bottom: 0rpx;
	// #ifdef H5
	bottom: 90rpx;
	// #endif
	left: 0rpx;
	position: fixed;
	background-color: #ffffff;
	z-index: 100;

	.btn-pay {
		height: 80rpx;
		line-height: 80rpx;
		width: 208rpx;
		text-align: center;
		background: $main_color;
		color: white;
		font-size: 28rpx;
		border-radius: 80rpx;
		margin-right: 24rpx;
	}

	.ctl {
		flex: 1;
		display: flex;
		align-items: center;

		.text {
			font-size: 22rpx;
			margin-left: 12rpx;
		}

		.pi {
			margin-left: 8rpx;
			font-size: 22rpx;
			font-weight: bold;
		}

		.num {
			margin-left: 4rpx;
			font-size: 30rpx;
			font-weight: bold;

		}

		.yhpi {
			margin-left: 8rpx;
			font-size: 20rpx;
		}

		.yhnum {
			margin-left: 4rpx;
			font-size: 24rpx;
		}
	}

}

.nologin {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.main-btn {
		width: 180rpx;
		margin-bottom: 30rpx;
		background-color: $main_color;
		color: #fff;
		border-radius: 50rpx;
	}
}
</style>
